<!--
 * @Author: linZeJian
 * @Date: 2022-08-24 10:53:55
 * @LastEditors: linZeJian
 * @LastEditTime: 2022-08-26 14:49:02
 * @Description:
-->
<template>
  <div v-if="column.display">
    <van-field
      clickable
      :name="column.prop"
      input-align="right"
      right-icon="arrow"
      :modelValue="modelValue"
      :label="column.label"
      :placeholder="
        column.placeholder ? column.placeholder : '请选择' + column.label
      "
      :disabled="column.disabled"
      :required="column.required"
      :style="
        column.readonly || column.disabled || column.detail
          ? 'pointer-events: none;'
          : ''
      "
      :rules="[{ required: column.required }]"
      @click="show = true"
      readonly
    />
    <van-popup v-model:show="show"  round position="bottom">

      <van-date-picker
              v-model="currentDate"
              title="选择日期"
              :min-date="minDate"
              :max-date="maxDate"
              @cancel="cancelDatetime"
              @confirm="confirmDatetime"
      />

    </van-popup>

    <van-popup v-model:show="showTime"  round position="bottom">
      <van-time-picker
              v-model="currentTime"
              title="选择时间"
              :columns-type="columnsType"
              :min-date="minDate"
              :max-date="column.maxDate"
              @cancel="cancelTime"
              @confirm="confirmTime"
      />
    </van-popup>
  </div>
</template>

<script>
  import mixEvent from './mixins/mixEvent';
import { formatDateToVants,formatToDateVants} from '@/framework-core/utils/util'
export default {
  name: "avant-datetime",
  props: ['column','modelValue'],
  inject: ['getViewFormData'],
  mixins: [mixEvent],
  data() {
    return {
      show: false,
      dateTemp:"",
      timeTemp:"",
      columnsType:['hour', 'minute', 'second'],
      currentDate:[],
      currentTime:[],
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
    };
  },
  created() {},

  mounted(){
    if( this.getViewFormData){
      this.formData = this.getViewFormData()
    }
  },

  watch: {

    modelValue: {
      handler(newVal, oldVal) {
        if (!newVal) {
          return
        }
        this.currentDate = formatToDateVants(newVal,"yyyyMMdd");
        this.currentTime = formatToDateVants(newVal," hhmmss");
      },
      immediate: true // 确保初始化时也执行一次
    }
  },

  methods: {

    /**
     * @description: 关闭时间弹窗
     * @param {*}
     * @return {*}
     */
    cancelDatetime() {
      this.show = false;
    },

    /**
     * @description: 时间选择确认
     * @param {*} value
     * @return {*}
     */
    confirmDatetime(value) {

      //alert( JSON.stringify(value))
       this.dateTemp =  formatDateToVants(value.selectedValues,"yyyyMMdd");
       let v = this.dateTemp +" "+this.timeTemp;
       this.$emit('update:modelValue',v );
      this.bindCalculatorEvent(this.column,v);
      this.show = false;
      this.showTime = true
    },

    cancelTime() {
      this.showTime = false;
    },

    /**
     * @description: 时间选择确认
     * @param {*} value
     * @return {*}
     */
    confirmTime(value) {
      const data = value.selectedValues;
      this.timeTemp = data[0] + ":" +  data[1]+ ":" +  data[2];
      let v = this.dateTemp +" "+this.timeTemp;
      this.$emit('update:modelValue',v);
      this.bindCalculatorEvent(this.column,v);
      this.showTime = false;
    }

  },
};
</script>

<style scoped>

</style>
